<template>
  <div class="test-status-monitor">
    <div class="test-status-monitor-bottom">
      <span class="title-font">已完成任务</span>

      <div class="display-table-content">
        <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          :header-cell-style="{
            textAlign: 'center',
            background: '#013770',
            color: '#1adafb',
            fontSize: '#2rem',
            border: 'none',
          }"
          :cell-style="{
            textAlign: 'center',
            background: '#020e36',
            color: '#ffffff',
            border: 'none',
          }"
          height="38vh"
          style="width: 100%"
        >
          <el-table-column prop="taskName" label="任务名称" width="250" />
          <el-table-column prop="beginTime" label="开始时间" width="200" />
          <el-table-column prop="endTime" label="结束时间" width="200" />
          <el-table-column prop="execTime" label="执行时间" width="140" />
          <el-table-column prop="execStatus" label="执行状态" width="140" />
          <el-table-column prop="sendPackNum" label="发送包数" />
          <el-table-column prop="recvPackNum" label="接收包数" />
          <el-table-column
            prop="sendDataSize"
            label="发送数据大小"
            width="140"
          />
          <el-table-column
            prop="recvDataSize"
            label="接收数据大小"
            width="140"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import GuideTitle from "@/components/GuideTitle";
import { queryByPage } from "@/api/testStatusMonitor";
export default {
  name: "TestStatusMonitor",
  components: { GuideTitle },
  props: {},
  data() {
    return {
      tableData: [
        {
          id: "1313123123123", // id
          taskName: "111", // 任务名称
          beginTime: "开始时间", // 开始时间
          endTime: "结束时间", // 结束时间
          execTime: "执行时间", // 执行时间
          execStatus: "执行状态", // 执行状态
          sendPackNum: 1, // 发送包数
          recvPackNum: 11, // 接收包数
          sendDataSize: "1", // 发送数据大小
          recvDataSize: "1", // 接收数据大小
        },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.queryByPage();
  },
  beforeDestroy() {},
  destroyed() {},
  methods: {
    // 分页查询测试任务状态列表
    queryByPage() {
      queryByPage()
        .then((res) => {
          console.log("resres", res);

          const code = res.code;
          if (code == 200) {
            this.$message.success("分页查询测试任务状态列表成功");
          } else {
            this.$message.error("分页查询测试任务状态列表失败");
          }
          if (res.rows != null) {
            this.tableData = res.rows;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.test-status-monitor {
  display: flex;
  flex-direction: column;
  height: 100%;
  // padding: 10px;
  height: 70vh;
  .test-status-monitor-bottom {
    flex: 1;
    background: url("~@/assets/images/statusMonitor/systemLoadBg.png") no-repeat
      center center;
    background-size: 100% 100%;
    margin-top: 10px;
    padding: 10px;
    .display-table-content {
      padding: 10px 10px 0 10px;
    }
  }
  .title-font {
    font-weight: bold;
    background: linear-gradient(to bottom, #f0f0f0, #00e4ff);
    -webkit-background-clip: text; /* 使用背景作为文字填充 */
    -webkit-text-fill-color: transparent; /* 隐藏文字的实际颜色 */ /* 渐变色从红色到蓝色 */
    letter-spacing: 0.15em; /* 设置字间距为0.2em，可以根据需要调整 */
  }
}
</style>
